<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>车间看板管理</el-breadcrumb-item>
			<el-breadcrumb-item>个人看板</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card>
			<el-row :gutter="20">
				<el-col :span="14">
					<div class="figures">
						<div class="figuresTitle">
							<div>
								<div style="font-size: 26px;color: #ffffff;">
									生产统计
								</div>
								<div style="font-size: 5px;color: #ffffff;margin-bottom: 20px;">
									PRODUCTION FIGURES
								</div>
							</div>
							<div class="text">
								测试设备1
							</div>
							<div class="text">
								测试设备2
							</div>
							<div class="text">
								测试设备3
							</div>
							<div class="text">
								测试设备4
							</div>
							<div class="text">
								测试设备5
							</div>
						</div>
						<div class="figuresProcess">
							<el-progress type="circle" percentage="66" class="circle" color="#6969FF">
								<h1>已完成</h1>
								<h1>66%</h1>
							</el-progress>
							<div style="width: 100%;height: 180px;margin-top: 80px;">
								<div style="display: flex;justify-content: space-around;margin-top: 100px;">
									<div class="reddot"></div>
									<div class="bluedot"></div>
									<div class="greendot"></div>
								</div>
								<div style="display: flex;justify-content: space-around;margin-top: 5px;color: #7F9DFF;font-size: 14px;">
									<div>预计</div>
									<div>消耗</div>
									<div>剩余</div>
								</div>
								<div style="display: flex;justify-content: space-around;margin-top: 5px;color: #7F9DFF;font-size: 14px;">
									<div>0小时</div>
									<div>96小时</div>
									<div>0小时</div>
								</div>
							</div>
						</div>
						<div class="figuresfull">
							<div style="margin-top: 50px;">
								<div style="color: #ffffff;font-size: 14px;">
									昨日完成测试任务数 10
								</div>
								<div style="display: flex;">
									<el-progress :text-inside="true" :stroke-width="20" :percentage="100"
										class="finish" color="#2DEFB8" style="margin-top: 18px;" :stroke-linecap="square"></el-progress>
									<div style="color: #7F9DFF;font-size: 14px;margin-top: 5px;">
										<span>总任务：10</span>
										<br>
										<span>未完成：0</span>
									</div>
								</div>
								<div style="color: #ffffff;font-size: 14px;">
									已发布测试工单数 10
								</div>
								<div style="display: flex;">
									<el-progress :text-inside="true" :stroke-width="20" :percentage="50" class="finish" color="#5D85F1" style="margin-top: 18px;" :stroke-linecap="square">
									</el-progress>
									<div style="color: #7F9DFF;font-size: 14px;margin-top: 5px;">
										<span>总任务：20</span>
										<br>
										<span>未完成：10</span>
									</div>
								</div>
								<div style="color: #ffffff;font-size: 14px;">
									昨日解决测试问题数 0
								</div>
								<div style="display: flex;">
									<el-progress :text-inside="true" :stroke-width="20" :percentage="0" class="finish" style="margin-top: 18px;">
									</el-progress>
									<div style="color: #7F9DFF;font-size: 14px;margin-top: 5px;">
										<span>总任务：10</span>
										<br>
										<span>未完成：0</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="10">
					<div class="overview">
						<div>
							<div style="font-size: 26px;color: #ffffff;">
								生产总览
							</div>
							<div style="font-size: 5px;color: #ffffff;">
								PRODUCTION OVERVIEW
							</div>
						</div>
						<div style="display: flex;justify-content: space-around;">
							<div style="margin-top: 60px;margin-left: 70px;margin-right: 20px; width: 110px;">
								<div style="font-size:18px ;background: #091835;height: 30px;width: 100px;border-radius: 15px;line-height: 30px;text-align: center;color: #ffffff;">
									所有项目
								</div>
								<div style="font-size: 60px;color: #ffffff;">
									19
								</div>
								<div style="font-size:18px ;background: linear-gradient( #036DDA , #A30CC3);height: 30px;width: 100px;border-radius: 15px;line-height: 30px;text-align: center;color: #FFFFFF;">
									查看所有
								</div>
							</div>
							<div id="rightech">

							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="14">
					<div class="details">
						<div>
							<div style="font-size: 26px;color: #ffffff;">
								生产详情
							</div>
							<div style="font-size: 5px;color: #ffffff;">
								PRODUCTION DETAILS
							</div>
						</div>

						<el-table :data="tableData" style="width: 100%" :cell-style="{color:'#ffffff',fontSize:'14px'}" :header-cell-style="{color:'#ffffff',fontSize:'16px',fontWeight:'Bold'}">
							<el-table-column prop="name" label="项目名称" width="130">
							</el-table-column>
							<el-table-column prop="data" label="截止日期" width="130">
							</el-table-column>
							<el-table-column prop="state" label="状态" width="70">
							</el-table-column>
							<el-table-column prop="predict" label="预计" width="70">
							</el-table-column>
							<el-table-column prop="consume" label="消耗" width="70">
							</el-table-column>
							<el-table-column prop="residue" label="剩余" width="70">
							</el-table-column>
							<el-table-column prop="progress" label="进度" width="180" align="center">
								<template #default="scope">
									<el-progress :percentage="scope.row.progress" color="#5D85F1"></el-progress>
								</template>
							</el-table-column>
							<el-table-column prop="print" label="燃尽图" width="180" align="center">
							</el-table-column>
						</el-table>

					</div>
				</el-col>
				<el-col :span="10">
					<div class="task">
						<div>
							<div style="font-size: 26px;color: #ffffff;">
								任务详情
							</div>
							<div style="font-size: 5px;color: #ffffff;">
								TASK DETAILS
							</div>
							<el-table :data="tasktableData" style="width: 100%" :cell-style="{color:'#ffffff',fontSize:'14px'}" :header-cell-style="{color:'#ffffff',fontSize:'16px',fontWeight:'Bold'}">
								<el-table-column prop="id" label="ID" width="100">
								</el-table-column>
								<el-table-column prop="p" label="P" width="100">
								</el-table-column>
								<el-table-column prop="name" label="任务名称" width="270">
								</el-table-column>
								<el-table-column prop="state" label="状态" width="70">
								</el-table-column>
							</el-table>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [{
					name: '测试设备XX1',
					data: '2021-04-25',
					state: '已延期',
					predict: '0',
					consume: '0',
					residue: '0',
					progress: '0',
					print: '',

				}, {
					name: '测试设备XX1',
					data: '2021-04-25',
					state: '已延期',
					predict: '0',
					consume: '0',
					residue: '0',
					progress: '20',
					print: '',
				}, {
					name: '测试设备XX1',
					data: '2021-04-25',
					state: '已延期',
					predict: '0',
					consume: '0',
					residue: '0',
					progress: '0',
					print: '',
				}, {
					name: '测试设备XX1',
					data: '2021-04-25',
					state: '已延期',
					predict: '0',
					consume: '0',
					residue: '0',
					progress: '80',
					print: '',
				}, {
					name: '测试设备XX1',
					data: '2021-04-25',
					state: '已延期',
					predict: '0',
					consume: '0',
					residue: '0',
					progress: '50',
					print: '',
				}, {
					name: '测试设备XX1',
					data: '2021-04-25',
					state: '已延期',
					predict: '0',
					consume: '0',
					residue: '0',
					progress: '50',
					print: '',
				}],
				tasktableData: [{
					id: '011',
					p: '③',
					name: '测试设备XX-设备sn001-外壳检测',
					state: '进行中'
				}, {
					id: '011',
					p: '③',
					name: '测试设备XX-设备sn001-外壳检测',
					state: '进行中'
				}, {
					id: '011',
					p: '③',
					name: '测试设备XX-设备sn001-外壳检测',
					state: '进行中'
				}, {
					id: '011',
					p: '③',
					name: '测试设备XX-设备sn001-外壳检测',
					state: '进行中'
				}, {
					id: '011',
					p: '③',
					name: '测试设备XX-设备sn001-外壳检测',
					state: '进行中'
				}, {
					id: '011',
					p: '③',
					name: '测试设备XX-设备sn001-外壳检测',
					state: '进行中'
				}]
			}
		},
		mounted() {
			this.getrightech()
		},
		methods: {
			getrightech() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = this.$echarts.init(document.getElementById("rightech"));
				// 绘制图表
				myChart.setOption({
					xAxis: {
						type: 'category',
						data: ['未开始', '进行中', '已挂起', '已关闭', ]
					},
					yAxis: {
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						}
					},
					series: [{
						data: [5, 3, 4, 7],
						type: 'bar',
						barWidth: 20,
					}],
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/.el-card__body{
		background-color: #031331;
	}
	/deep/.el-table__body-wrapper{
		background-color: #091835;
	}
	/deep/.el-table__row{
		background-color: #091835;
	}
	/deep/.el-table td{
    border-bottom: 1px solid #091835; 
	}
	/deep/.el-table th{
	border-bottom: 1px solid #091835; 
	}
	/deep/.el-table--border::after, .el-table--group::after, .el-table::before{
		    background-color: #091835;
	}
	/deep/.el-table__header-wrapper{
		background-color: #091835;
	}
	/deep/.is-leaf{
		background-color: #091835;
	}
	.figures {
		height: 385px;
		display: flex;
		background-color: #091835;
		.text {
			font-size: 16px;
			line-height: 52px;
			text-align: center;
			color: #7F9DFF;
			height: 52px;
			margin-left: 20px;
			width: 220px;
		}
		.text:hover {
			color: #ffffff;
			background: linear-gradient(to right, #4A5990, #1C1935);
			 border-left: 4px solid #4C63B9;
		}

		.figuresTitle {
			width: 200px;
		}

		.figuresProcess {
			width: 400px;
			position: relative;

			.circle {
				left: 50%;
				top: 20%;
				transform: translateX(-50%);
			}

			.reddot {
				height: 10px;
				width: 10px;
				border-radius: 50%;
				background: linear-gradient( #F46EC6 , #EC8B6B); 
			}

			.bluedot {
				height: 10px;
				width: 10px;
				border-radius: 50%;
				background: linear-gradient( #68E0CF , #5454E4); 
			}

			.greendot {
				height: 10px;
				width: 10px;
				border-radius: 50%;
				background: linear-gradient( #F7CB6B , #FBA980);
			}
		}

		.figuresfull {
			.finish {
				width: 200px;
				margin-top: 10px;
				margin-right: 20px;
				margin-bottom: 35px;
			}
		}
	}

	.overview {
		height: 385px;
		background-color: #091835;
		#rightech {
			width: 500px;
			height: 300px;
		}
	}

	.details {
		height: 385px;
		margin-top: 20px;
		background-color: #091835;
	}

	.task {
		height: 385px;
		margin-top: 20px;
		background-color: #091835;
	}
</style>
